<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/comm.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<title>Document</title>
</head>
<body>
	<header>
		<iframe class="my_header" src="header.html" scrolling="no"></iframe>
	</header>
	
	<div class ="container">
		
		
		<!-- 焦点轮播图 -->
		<div id="demo" class="carousel" data-ride="carousel">
			<!-- 图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img class="w-100" src="img/index/banner1.png" >
				</div>
				
				<div class="carousel-item">
					<img class="w-100" src="img/index/banner2.png" >
				</div>
				
				<div class="carousel-item">
					<img class="w-100" src="img/index/banner3.png" >
				</div>
				
				<div class="carousel-item">
					<img class="w-100" src="img/index/banner4.png" >
				</div>
			</div>
			
			<!-- 指示器 -->
			<ul class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#demo"></li>
				<li data-slide-to="1" data-target="#demo"></li>
				<li data-slide-to="2" data-target="#demo"></li>
				<li data-slide-to="3" data-target="#demo"></li>
			</ul>
			
			<!-- 左右箭头 -->
			<a data-slide="next" href="#demo" class="carousel-control-next">
				<span class="carousel-control-next-icon"></span>
			</a>
			<a data-slide="prev" href="#demo" class="carousel-control-prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
		</div>
		
		
		<!-- 1L标题 -->
		<!-- 1L布局/首页推荐 -->
		<div class="border-bottom mt-3 pb-2">
			<img class="mw-100" src="img/index/computer_icon.png" >
			<span class="h4 text-muted">首页推荐 /1F</span>
		</div>
		
		<!-- 1L布局/图片 -->
		<div class="row no-gutters">
			<div class="col-lg-7 col-sm-12">
				<!-- 1.apple -->
				<div class="my_height mr-lg-1 mb-1">
					
					<div class="card bg-transparent border-0 w-40 pt-5 pl-5">
						<h3 class="mb-0">灵越 燃7000系列</h3>
						<h6 class="font-weight-normal text-small text-muted">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</h6>
						<span class="text-primary mb-3">￥6988.00</span>
						<a class="btn btn-primary w-50" href="">查看详情</a>
					</div>
					
					<img class="float-right img-position1" src="img/index/study_computer_img1.png" >
					
				</div>
			</div>
			
			<div class="col-lg-5 col-sm-12">
				<!-- 2.mi -->
				<div class="my_height mb-1">
					
					<div class="card bg-transparent border-0 w-40 pt-5 pl-5">
						<h3 class="mb-0">小米Air 金属超轻薄</h3>
						<h6 class="font-weight-normal text-small text-muted">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</h6>
						<span class="text-primary mb-3">￥3488.00</span>
						<a class="btn btn-primary w-75" href="">查看详情</a>
					</div>
					
					<img class="float-right img-position2" src="img/index/study_computer_img2.png" >
					
				</div>
			</div>
			
			<div class="col-lg-5 col-sm-12">
				<!-- 3. -->
				<div class="my_bottom mr-lg-1 mb-sm-1 mb-lg-0">
					
					<div class="card bg-transparent border-0 w-40 pt-5 pl-5">
						<h5 class="mb-0">小米Air 金属超轻薄</h5>
						<span class="text-primary mb-3">￥3488.00</span>
						<a class="btn btn-primary w-75" href="">查看详情</a>
					</div>
					
					<img class="float-right img-position3" src="img/index/study_computer_img3.png" >
					
				</div>
			</div>
			
			<div class="col-lg-7 col-sm-12">
				<div class="row no-gutters">
					
					<div class="col">
						<!-- 4. -->
						<div class="my_bottom mr-1">
							<div class="card border-0 bg-transparent align-items-center">
								<img class="img-position4" src="img/index/study_computer_img4.png" >
								<p class="text_small text-dark mb-1 text-center">戴尔(DELL) 笔记本电脑</p>
								<p class="text-primary mb-1">￥4600.00</p>
								<span class="btn btn-primary btn-sm w-50">查看详情</span>
							</div>
						</div>
					</div>
					
					<div class="col">
						<!-- 5. -->
						<div class="my_bottom mr-1">
							<div class="card border-0 bg-transparent align-items-center">
								<img class="img-position4" src="img/index/study_computer_img5.png" >
								<p class="text_small text-dark mb-1 text-center">华硕RX310 金属超极本</p>
								<p class="text-primary mb-1">￥5600.00</p>
								<span class="btn btn-primary btn-sm w-50">查看详情</span>
							</div>
						</div>
					</div>
					
					<div class="col">
						<!-- 6. -->
						<div class="my_bottom">
							<div class="card border-0 bg-transparent align-items-center">
								<img class="img-position4" src="img/index/study_computer_img4.png" >
								<p class="text_small text-dark mb-1 text-center">联想(Lenovo) 笔记本电脑</p>
								<p class="text-primary mb-1">￥6600.00</p>
								<span class="btn btn-primary btn-sm w-50">查看详情</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	
	<footer>
		<iframe class="my_footer" src="footer.html" scrolling="no"></iframe>
	</footer>
</body>
</html>